<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="es" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="es" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="es" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Calendario - SAI</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        </style>
        <link rel="stylesheet" href="styles/normalize.css">
        <link rel="stylesheet" href="styles/main.css">
        <link rel="stylesheet" href="styles/common.css">
        <link rel="stylesheet" href="styles/jquery-ui/jquery-ui.css">
        <link rel="stylesheet" href="styles/jquery-ui/jquery.ui.datepicker.css">
        <link rel="stylesheet" href="styles/calendar/calendar.css">
        <script src="scripts/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <div style="position:absolute;top:5%;left:5%;width:90%;height:90%;">
            
            <div class="calendar-module">

                <h2 class="hidden">Calendar</h2>

                <div class="menu clearfix">
                    <div class="left">
                        <button type="button" class="today button">Hoy</button>
                        <div class="button-group">
                            <button type="button" class="prev-month button"><span class="icon chevron-left"></span><span class="hidden">Mes anterior</span></button>
                            <button type="button" class="next-month button"><span class="icon chevron-right"></span><span class="hidden">Mes siguiente</span></button>
                        </div>
                        <strong class="current-date">Marzo de 2014</strong>
                    </div>
                    <div class="right">
                        <div class="button-group">
                            <button type="button" class="month button">Mes</button>
                            <button type="button" class="agenda button">Agenda</button>
                        </div>
                    </div>
                </div>

                <div class="grid">
                    <table>
                        <thead>
                            <tr>
                                <td>dom</td>
                                <td>lun</td>
                                <td>mar</td>
                                <td>mié</td>
                                <td>jue</td>
                                <td>vie</td>
                                <td>sáb</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <!--div class="out"-->
                                    <!--div class="today"-->
                                    <!--div class="selected"-->
                                    <div>
                                        <button type="button" class="day">24</button>
                                        <!--<button type="button" class="event">
                                            <span class="icon flag"></span>
                                            16:30hs Show en la Trastienda
                                        </button>
                                        <button type="button" class="event">
                                            <span class="icon globe"></span>
                                            16:30hs Show en la Trastienda
                                        </button>
                                        <button type="button" class="more">+2 más</button>-->
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">25</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">26</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">27</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                    <!--div class="out"-->
                                        <button type="button" class="day">28</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                    <!--div class="out"-->
                                        <button type="button" class="day">6</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">1 de mar</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div>
                                        <button type="button" class="day">2</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">3</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">4</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">5</button>
                                        <!--<button type="button" class="event">
                                            <span class="icon flag"></span>
                                            16:30hs Show en la Trastienda
                                        </button>
                                        <button type="button" class="event">
                                            <span class="icon globe"></span>
                                            16:30hs Show en la Trastienda
                                        </button>
                                        <button type="button" class="more">+2 más</button>-->
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">6</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">7</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">8</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div>
                                        <button type="button" class="day">9</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">10</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">11</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">12</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">13</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">14</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">15</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div>
                                        <button type="button" class="day">16</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">17</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">18</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">19</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">20</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">21</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">22</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div>
                                        <button type="button" class="day">23</button>
                                    </div>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">24</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">25</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">26</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">27</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">28</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">29</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div>
                                        <button type="button" class="day">30</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">31</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">1 de abr</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">2</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">3</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">4</button>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <button type="button" class="day">5</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="agenda" hidden>
                    
                    <div class="no-events" hidden>
                        <div class="container clearfix">
                            <strong><span class="icon warning"></span> Todavía no has cargado ningún evento</strong>
                            <span class="bracket"></span>
                            <div class="buttons">
                                <a href="" class="button important blue"><span class="icon flag"></span> Crear nuevo evento</a>
                                <a href="" class="button important blue"><span class="icon globe"></span> Crear clase de exibición</a>
                                <a href="" class="button important blue"><span class="icon users"></span> Crear clase personalizada</a>
                                <a href="" class="button important blue"><span class="icon star"></span> Agrear clase a un curso</a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="menu clearfix">
                        <div class="left">
                            <button type="button" class="button show-all"><span class="icon squared-plus"></span> Mostrar todo</button>
                            <button type="button" class="button hide-all"><span class="icon squared-minus"></span> Ocultar todo</button>
                        </div>
                        <div class="right">
                            <strong>Período: </strong>
                            <input type="text" name="from" placeholder="Desde" />
                            <strong>-</strong>
                            <input type="text" name="to" placeholder="Hasta" />
                            <button type="button" class="button apply-filter"><span class="icon check"></span> Aplicar</button>
                            <button type="button" class="button important blue clear-filter"><span class="icon circled-cross"></span><span class="hidden"> Cancelar</span></button>
                        </div>
                    </div>
                    
                    <ul class="days">
                        <!--<li>
                            <strong>mié 5 de mar de 2014</strong>
                            <ul class="events">
                                <li class="opened">
                                    <span class="hour">19:00hs</span>
                                    <button type="button">
                                        <span class="icon squared-plus"></span>
                                        <span class="icon star"></span>
                                        <span class="text">Show en la Trastienda</span>
                                    </button>
                                    <ul class="info">
                                        <li>
                                            <strong>Curso:</strong> <a href="">Curso B</a>
                                        </li>
                                        <li>
                                            <strong>Horario:</strong> 19:00hs - Viernes 14 de Marzo de 2014
                                        </li>
                                        <li>
                                            <a href="" class="button"><span class="icon calendar"></span> Cambiar fecha</a>
                                            <a href="" class="button"><span class="icon circled-plus"></span> Ver más información</a>
                                            <a href="" class="button"><span class="icon pencil"></span> Editar</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <span class="hour">19:00hs</span>
                                    <button type="button">
                                        <span class="icon squared-plus"></span>
                                        <span class="icon star"></span>
                                        <span class="text">Show en la Trastienda</span>
                                    </button>
                                    <ul class="info">
                                        <li>
                                            <strong>Curso:</strong> <a href="">Curso B</a>
                                        </li>
                                        <li>
                                            <strong>Horario:</strong> 19:00hs - Viernes 14 de Marzo de 2014
                                        </li>
                                        <li>
                                            <a href="" class="button"><span class="icon calendar"></span> Cambiar fecha</a>
                                            <a href="" class="button"><span class="icon circled-plus"></span> Ver más información</a>
                                            <a href="" class="button"><span class="icon pencil"></span> Editar</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <strong>mié 5 de mar de 2014</strong>
                            <ul class="events">
                                <li>
                                    <span class="hour">19:00hs</span>
                                    <button type="button">
                                        <span class="icon squared-plus"></span>
                                        <span class="icon star"></span>
                                        <span class="text">Show en la Trastienda</span>
                                    </button>
                                    <ul class="info">
                                        <li>
                                            <strong>Curso:</strong> <a href="">Curso B</a>
                                        </li>
                                        <li>
                                            <strong>Horario:</strong> 19:00hs - Viernes 14 de Marzo de 2014
                                        </li>
                                        <li>
                                            <a href="" class="button"><span class="icon calendar"></span> Cambiar fecha</a>
                                            <a href="" class="button"><span class="icon circled-plus"></span> Ver más información</a>
                                            <a href="" class="button"><span class="icon pencil"></span> Editar</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <span class="hour">19:00hs</span>
                                    <button type="button">
                                        <span class="icon squared-plus"></span>
                                        <span class="icon star"></span>
                                        <span class="text">Show en la Trastienda</span>
                                    </button>
                                    <ul class="info">
                                        <li>
                                            <strong>Curso:</strong> <a href="">Curso B</a>
                                        </li>
                                        <li>
                                            <strong>Horario:</strong> 19:00hs - Viernes 14 de Marzo de 2014
                                        </li>
                                        <li>
                                            <a href="" class="button"><span class="icon calendar"></span> Cambiar fecha</a>
                                            <a href="" class="button"><span class="icon circled-plus"></span> Ver más información</a>
                                            <a href="" class="button"><span class="icon pencil"></span> Editar</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="today">
                            <strong>mié 5 de mar de 2014</strong>
                            <ul class="events">
                                <li>
                                    <span class="hour">19:00hs</span>
                                    <button type="button">
                                        <span class="icon squared-plus"></span>
                                        <span class="icon star"></span>
                                        <span class="text">Show en la Trastienda</span>
                                    </button>
                                    <ul class="info">
                                        <li>
                                            <strong>Curso:</strong> <a href="">Curso B</a>
                                        </li>
                                        <li>
                                            <strong>Horario:</strong> 19:00hs - Viernes 14 de Marzo de 2014
                                        </li>
                                        <li>
                                            <a href="" class="button"><span class="icon calendar"></span> Cambiar fecha</a>
                                            <a href="" class="button"><span class="icon circled-plus"></span> Ver más información</a>
                                            <a href="" class="button"><span class="icon pencil"></span> Editar</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <span class="hour">19:00hs</span>
                                    <button type="button">
                                        <span class="icon squared-plus"></span>
                                        <span class="icon star"></span>
                                        <span class="text">Show en la Trastienda</span>
                                    </button>
                                    <ul class="info">
                                        <li>
                                            <strong>Curso:</strong> <a href="">Curso B</a>
                                        </li>
                                        <li>
                                            <strong>Horario:</strong> 19:00hs - Viernes 14 de Marzo de 2014
                                        </li>
                                        <li>
                                            <a href="" class="button"><span class="icon calendar"></span> Cambiar fecha</a>
                                            <a href="" class="button"><span class="icon circled-plus"></span> Ver más información</a>
                                            <a href="" class="button"><span class="icon pencil"></span> Editar</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>-->
                    </ul>
                </div>
            </div>
            
        </div>

        <script src="scripts/vendor/jquery-1.10.2.min.js"></script>
        <script src="scripts/vendor/jquery-ui.js"></script>
        <script src="scripts/vendor/jquery.ui.datepicker.js"></script>
        <script src="scripts/plugins.js"></script>
        <script src="scripts/main.js"></script>

        <script src="scripts/calendar/calendar.js"></script>
        <script src="scripts/calendar/utils.js"></script>
        <script src="scripts/calendar/menu.js"></script>
        <script src="scripts/calendar/grid/grid.js"></script>
        <script src="scripts/calendar/agenda/agenda.js"></script>
        <script src="scripts/calendar/agenda/menu.js"></script>
        <script src="scripts/calendar/agenda/list.js"></script>

        <script>
            
            /*
            
                Tipos de evento:
                
                1 - Evento común
                2 - Curso
                3 - Exibición
                4 - Clase personalizada
                5 - Clase presencial
                6 - Actividades
                
            */
            
            var testJSON = {
                
                configuration: {
                },
                
                events: [
                    {
                        date: "1396129226511",
                        id: "A",
                        type: "1",
                        name: "Show en la Trastienda",
                        info: {
                        }

                    },
                    {
                        date: "1395846000000",
                        id: "E",
                        type: "5",
                        name: "Martin Gómez",
                        info: {
                        }

                    },
                    {
                        date: "1395509426000",
                        id: "B",
                        type: "2",
                        name: "Ejercitación Nº 23",
                        info: {
                        }

                    },
                    {
                        date: "1395514800000",
                        id: "C",
                        type: "3",
                        name: "Muestra de clase online",
                        info: {
                        }

                    },
                    {
                        date: "1395527400000",
                        id: "D",
                        type: "4",
                        name: "Muestra de clase online",
                        info: {
                        }

                    },
                    {
                        date: "1392901200000",
                        id: "D",
                        type: "4",
                        name: "Evento en Febrero",
                        info: {
                        }

                    }
                    /*,
                    {
                        date: "1395856800000",
                        id: "F",
                        type: "6",
                        name: "Grupo 1 presenta tarea",
                        info: {
                        }

                    }*/
                ]
                
            }
            
            
            $(document).ready(function () {

                var calendar = new Sai.Calendar( $(".calendar-module"), testJSON );

            });
        </script>
    </body>
</html>




